<template>
    <div class="multiple_upload_container">
        <el-upload ref="multiple_upload" :action="uploadFileAction"
                   :headers="{ token: token,account_set_sid:account_set_sid }"
                   :on-success="handleUploadSuccess" :list-type="listType" :file-list="fileList" multiple
                   :on-remove="onRemove" :disabled="disabled">
            <slot />
        </el-upload>
    </div>
</template>

<script>
import fileApi from "@common/api/fileApi";

export default {
    name: "MultipleUpload",
    props: {
        onSuccess: Function,
        onRemove: Function,
        listType: String,
        fileList: {
            type: Array,
            default() {
                return [];
            },
        },
        option: {
            type: Object,
            default() {
                return {
                    biz_type: '',
                    biz_path: '',
                    biz_table: '',
                    biz_sid: '',
                    biz_field_tag: '',
                    keep_file_name: ''
                };
            },
        },
        disabled: Boolean,
    },
    data() {
        return {
            fileApiUrl: fileApi.url,
            token: this.$store.state.accessToken.token,
            account_set_sid: this.$utils.getAccountSetSid(),
            uploadedFile: [],
            respList: [],
        };
    },
    watch: {
        fileList: {
            handler() {
                this.respList = [];
            },
            deep: true,
            immediate: true,
        },
    },
    computed: {
        uploadFileAction() {
            let path = this.fileApiUrl.uploadFile;
            let params = [];
            if (this.$utils.isNotEmpty(this.option.biz_type)) {
                params.push('biz_type=' + this.option.biz_type);
            }
            if (this.$utils.isNotEmpty(this.option.biz_path)) {
                params.push('biz_path=' + this.option.biz_path);
            }
            if (this.$utils.isNotEmpty(this.option.biz_table)) {
                params.push('associate_biz_table=' + this.option.biz_table);
            }
            if (this.$utils.isNotEmpty(this.option.biz_sid)) {
                params.push('associate_biz_sid=' + this.option.biz_sid);
            }
            if (this.$utils.isNotEmpty(this.option.biz_field_tag)) {
                params.push('associate_biz_field_tag=' + this.option.biz_field_tag);
            }
            if (this.$utils.isNotEmpty(this.option.keep_file_name)) {
                params.push('keep_file_name=' + this.option.keep_file_name);
            }
            if (this.$utils.isNotEmptyList(params)) {
                path += '?' + params.join('&');
            }
            return path;
        },
    },
    methods: {
        clear() {
            this.uploadedFile = [];
            this.respList = [];
            if (this.$refs['multiple_upload']) {
                this.$refs['multiple_upload'].clearFiles()
            }
        },
        handleUploadSuccess(res, file, fileList) {
            console.log(res);
            this.uploadedFile.push(file);
            this.respList.push(res);
            if (this.uploadedFile.length === fileList.length) {
                typeof this.onSuccess === 'function' && this.onSuccess(this.respList);
                this.clear();
            }
        },
    },
}
</script>

<style scoped>
.multiple_upload_container {
    width: auto;
    height: auto;
}

.multiple_upload_container .el-upload--text {
    border: none;
    width: auto;
    height: auto;
    border-radius: 0;
}
</style>
